<template>
  <div class="search">
    <!-- 顶部导航 -->
    <itemnavbar />
    <!-- 搜索框体 -->
    <van-search v-model="keywords" shape="round" placeholder="请输入商品名称" />
    <!-- 显示区域 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="快搜索想要的商品吧🤭"
    />
  </div>
</template>

<script>
import Itemnavbar from "../components/Itemnavbar.vue";
export default {
  components: { Itemnavbar },
  data() {
    return {
      keywords: "",
    };
  },
};
</script>

<style>
.van-nav-bar__content > .van-nav-bar__title {
  color: white;
}

.van-search__content {
  border: 1px solid #e4004f;
}

.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>
